<template>
  <BasicDrawer v-bind="$attrs" @register="register" :title="displayModuleTitle" width="90%">
    <div style="display: flex; flex-direction: row">
      <div style="margin-right: 10px; flex: 1">
        <h2 style="font-weight: bold; font-size: 16px; margin-bottom: 15px"
          >{{ troubleCorrectInfo?.title }}
          <a v-if="troubleCorrectInfo.rptid > 0" @click="onRecordButtonClick"
            ><FileTextOutlined style="color: #5fadff"
          /></a>
        </h2>
        <a-descriptions :column="6" bordered :labelStyle="{ width: '130px' }">
          <a-descriptions-item label="一般/重大" :span="3"
            ><a-tag :color="troubleCorrectInfo.ismajor ? '#cd201f' : '#3b5999'">{{
              troubleCorrectInfo.ismajor ? '重大' : '一般'
            }}</a-tag></a-descriptions-item
          >
          <a-descriptions-item label="是否上报" :span="3">
            <a-tag v-if="troubleCorrectInfo.isreport" color="red">是</a-tag>
            <a-tag v-else color="green">否</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="单元" :span="3">
            {{ troubleCorrectInfo.unit }}
          </a-descriptions-item>
          <a-descriptions-item label="具体部位" :span="3">
            {{ troubleCorrectInfo.position ?? '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="类别" :span="2">{{
            troubleCorrectInfo.categoryname
          }}</a-descriptions-item>
          <a-descriptions-item label="项目" :span="2">{{
            troubleCorrectInfo.projectname
          }}</a-descriptions-item>
          <a-descriptions-item label="危险源" :span="2"
            >{{ troubleCorrectInfo.itemname }}
          </a-descriptions-item>
          <a-descriptions-item label="事故诱因" :span="6">
            {{ troubleCorrectInfo.couse ?? '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="可能导致的后果" :span="6">{{
            troubleCorrectInfo.maycouseharm ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="描述" :span="6">
            {{ troubleCorrectInfo.description ?? '-' }}
          </a-descriptions-item>

          <a-descriptions-item label="是否已派单整改" :span="2">
            <a-tag :color="troubleCorrectInfo.hasdispatch ? 'green' : 'red'">
              {{ troubleCorrectInfo.hasdispatch ? '是' : '否' }}</a-tag
            >
          </a-descriptions-item>

          <a-descriptions-item label="是否已整改完成" :span="2">
            <a-tag :color="troubleCorrectInfo.hascorrect ? 'green' : 'red'">
              {{ troubleCorrectInfo.hascorrect ? '是' : '否' }}</a-tag
            >
          </a-descriptions-item>
          <a-descriptions-item label="是否验收通过" :span="2">
            <a-tag :color="troubleCorrectInfo.hascheck ? 'green' : 'red'">
              {{ troubleCorrectInfo.hascheck ? '是' : '否' }}</a-tag
            >
          </a-descriptions-item>
        </a-descriptions>
        <a-divider v-if="troubleCorrectInfo?.attachment?.length > 0">隐患附件信息</a-divider>
        <div class="flex-row">
          <a-carousel
            arrows
            :autoplay="true"
            :dots="true"
            effect="fade"
            style="width: 400px; height: 220px"
            dot-position="top"
            v-if="troubleCorrectInfo?.attachment?.length > 0"
          >
            <template #prevArrow>
              <div class="custom-slick-arrow z-0" style="left: 10px">
                <left-outlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <right-outlined />
              </div>
            </template>
            <div
              v-for="(item, index) in troubleCorrectInfo.attachment.filter(
                (item) => item.type == 'png' || item.type == 'jpg',
              )"
            >
              <div class="relativdive">
                <img class="swipper-img" :src="item.url" />
                <h3 class="absolute z-10 left-2 inset-y-26 h-15">{{ item.title }}</h3>
                <div
                  style="background-color: #aeaeae; opacity: 0.4"
                  class="absolute z-10 inset-x-0.2 inset-y-52 h-8"
                ></div>
              </div>
            </div>
          </a-carousel>
          <a-list
            class="Alist"
            item-layout="horizontal"
            v-if="troubleCorrectInfo?.attachment?.length > 0"
            :data-source="
              troubleCorrectInfo.attachment.filter(
                (item) => item.type !== 'png' && item.type !== 'jpg',
              )
            "
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a @click="downloadFile(item)">下载</a>
                </template>
                <a-list-item-meta>
                  <template #title>
                    <span>{{ item.title }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
      <div style="display: flex; flex-direction: column; flex: 1">
        <a-descriptions title="整改信息" style="margin-bottom: 10px">
          <a-descriptions-item label="整改责任部门" :span="2">{{
            troubleCorrectInfo.resdeptname ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="整改责任人" :span="2">{{
            troubleCorrectInfo.resusername ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="整改负责人电话" :span="2">{{
            troubleCorrectInfo.resuserphone ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="整改完成时间" :span="3">{{
            troubleCorrectInfo.correctendtm
              ? moment(troubleCorrectInfo.correctendtm).format('YYYY-MM-DD')
              : '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="实际整改人员" :span="3">{{
            troubleCorrectInfo.correctusername ?? '-'
          }}</a-descriptions-item>

          <a-descriptions-item label="实际整改情况描述" :span="6">{{
            troubleCorrectInfo.correctdescription ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="实际整改附件" :span="6">
            <a-list
              class="Alist"
              item-layout="horizontal"
              v-if="troubleCorrectInfo.correctattachment?.length > 0"
              :data-source="troubleCorrectInfo.correctattachment"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <template #actions>
                    <a @click="downloadFile(item)">下载</a>
                  </template>
                  <a-list-item-meta>
                    <template #title>
                      <span>{{ item.title }}</span>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
            <span v-else>-</span>
          </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="验收信息">
          <a-descriptions-item label="验收时间" :span="3">{{
            troubleCorrectInfo.checktm
              ? moment(troubleCorrectInfo.checktm).format('YYYY-MM-DD')
              : '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="验收人员" :span="3">{{
            troubleCorrectInfo.checkusername ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="验收意见" :span="6">{{
            troubleCorrectInfo.checkdescription ?? '-'
          }}</a-descriptions-item>
          <a-descriptions-item label="验收附件" :span="6">
            <a-list
              class="Alist"
              item-layout="horizontal"
              v-if="troubleCorrectInfo.checkattachment?.length > 0"
              :data-source="troubleCorrectInfo.checkattachment"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <template #actions>
                    <a @click="downloadFile(item)">下载</a>
                  </template>
                  <a-list-item-meta>
                    <template #title>
                      <span>{{ item.title }}</span>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
            <span v-else>-</span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts">
  import { defineComponent, ref, unref, computed, reactive, onMounted } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { queryEnumOptions } from '/@/api/platform/enum';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
  import { QrcodeOutlined } from '@ant-design/icons-vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getFileApi } from '/@/api/platform/file';
  import { downloadByUrl } from '/@/utils/file/download';
  import { getOneEhsTroubleCorrectInfo } from '/@/api/ehs/troubleCorrect';
  import { reportEhsTroubleCorrect } from '/@/api/ehs/troublecorrect';
  import moment from 'moment';
  import { FileTextOutlined } from '@ant-design/icons-vue';
  export default defineComponent({
    components: { BasicDrawer, QrCode, QrcodeOutlined, FileTextOutlined },
    name: 'TroubleCorrectInfoView',
    setup() {
      const qrRef = ref<Nullable<QrCodeActionType>>(null);
      const dataId = ref();
      const riskLevelOptions = ref('');
      const { uploadUrl } = useGlobSetting();
      const troubleCorrectInfo = ref({});
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const [register, { closeDrawer }] = useDrawerInner((data) => {
        if (data != undefined && data != null) {
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          dataId.value = unrefData.dataId;
          getOneEhsTroubleCorrectInfo(dataId.value).then((res) => {
            troubleCorrectInfo.value = res;
            troubleCorrectInfo.value.attachment = res.attachment
              ? returnAttachment(res.attachment)
              : [];
            troubleCorrectInfo.value.correctattachment = res.correctattachment
              ? returnAttachment(res.correctattachment)
              : [];
            troubleCorrectInfo.value.checkattachment = res.checkattachment
              ? returnAttachment(res.checkattachment)
              : [];
            troubleCorrectInfo.value.correctsign = res.correctsign
              ? uploadUrl + getFileApi + res.correctsign
              : '';
            troubleCorrectInfo.value.checksign = res.checksign
              ? uploadUrl + getFileApi + res.checksign
              : '';
          });
        }
      });

      // 报告
      function onRecordButtonClick(record) {
        window.open(uploadUrl + getFileApi + record.rptid);
      }
      /**
       * 返回JSON格式的附件信息数组
       */
      function returnAttachment(attachment) {
        return JSON.parse(attachment).map((item) => {
          let url = uploadUrl + getFileApi + item.id;
          let title = item.name + '.' + item.type;
          return {
            ...item,
            title,
            url,
          };
        });
      }

      /**
       * 下载附件
       */
      function downloadFile(item) {
        downloadByUrl({ url: item.url, fileName: item.name });
      }

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      onMounted(() => {
        queryEnumOptions('EhsHazardIndentificationResultTypeEnum,EhsRiskLevelEnum').then((res) => {
          // console.log('option res', res);
          if (res != undefined && res != null && res.length > 0x0) {
            const identifyOp = res[0].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute?.split('"')[3],
              };
            });
            const riskOp = res[1].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute?.split('"')[3],
              };
            });
            riskLevelOptions.value = riskOp;
          }
        });
      });

      return {
        moment,
        dataId,
        riskLevelOptions,
        qrRef,
        troubleCorrectInfo,
        closeDrawer,
        register,
        displayModuleTitle,
        qcUnifyProps,
        onRecordButtonClick,
      };
    },
  });
</script>

<style lang="less" scoped>
  /* 轮播图的图片的高度为轮播区域高度(20rem)减去上下的边距(合计1rem) */
  @swipper-img-height: 20rem-5rem;

  .ant-carousel :deep(.slick-slide) {
    height: @swipper-img-height;
    line-height: @swipper-img-height;
    background: #dcdcdc;
    overflow: hidden;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    opacity: 0.5;
    z-index: 1;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.8;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #ffffff;
  }

  //轮播图缩放样式
  .relative {
    width: 100%;
    height: 250px;
  }
  .relativdive {
    width: 100%;
    height: 250px;
  }
  .swipper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .Alist {
    flex: 1;
    margin-left: 10px;
    padding: 0 10px;
    border-left: 1px solid rgb(247, 247, 247);
  }
</style>
